<template>
  <div class="flow-chart">
    <div class="chart-header">
      <div class="header-icon">
        <svg viewBox="0 0 24 24">
          <path d="M16,4A4,4 0 0,1 20,8A4,4 0 0,1 16,12H8A4,4 0 0,1 4,8A4,4 0 0,1 8,4H16M8,6A2,2 0 0,0 6,8A2,2 0 0,0 8,10H16A2,2 0 0,0 18,8A2,2 0 0,0 16,6H8Z" fill="currentColor"/>
        </svg>
      </div>
      <div class="header-info">
        <h4 class="chart-title">实时客流分布</h4>
        <p class="chart-subtitle">各区域人流量统计</p>
      </div>
    </div>

    <div class="flow-stats">
      <div class="stat-item total" @click="highlightAll">
        <div class="stat-icon">
          <svg viewBox="0 0 24 24">
            <path d="M12,5.5A3.5,3.5 0 0,1 15.5,9A3.5,3.5 0 0,1 12,12.5A3.5,3.5 0 0,1 8.5,9A3.5,3.5 0 0,1 12,5.5M5,8C5.56,8 6.08,8.15 6.53,8.42C6.38,9.85 6.8,11.27 7.66,12.38C7.16,13.34 6.16,14 5,14A3,3 0 0,1 2,11A3,3 0 0,1 5,8M19,8A3,3 0 0,1 22,11A3,3 0 0,1 19,14C17.84,14 16.84,13.34 16.34,12.38C17.2,11.27 17.62,9.85 17.47,8.42C17.92,8.15 18.44,8 19,8M5.5,18.25C5.5,16.18 8.41,14.5 12,14.5C15.59,14.5 18.5,16.18 18.5,18.25V20H5.5V18.25M0,20V18.5C0,17.11 1.89,15.94 4.45,15.6C3.86,16.28 3.5,17.22 3.5,18.25V20H0M24,20H20.5V18.25C20.5,17.22 20.14,16.28 19.55,15.6C22.11,15.94 24,17.11 24,18.5V20Z" fill="currentColor"/>
          </svg>
        </div>
        <div class="stat-details">
          <div class="stat-value">{{ getTotalVisitors() }}</div>
          <div class="stat-label">总游客数</div>
        </div>
      </div>
    </div>

    <div class="chart-container" ref="chartRef"></div>

    <div class="location-list">
      <div 
        v-for="(item, index) in data.series[0].data" 
        :key="data.categories[index]"
        class="location-item"
        :class="{ active: activeLocation === index }"
        @click="highlightLocation(index)"
      >
        <div class="location-icon">
          <svg viewBox="0 0 24 24">
            <path :d="getLocationIcon(data.categories[index])" fill="currentColor"/>
          </svg>
        </div>
        <div class="location-info">
          <div class="location-name">{{ data.categories[index] }}</div>
          <div class="location-count">{{ item }}人</div>
        </div>
        <div class="location-trend">
          <svg viewBox="0 0 24 24" class="trend-up">
            <path d="M7,14L12,9L17,14H7Z" fill="currentColor"/>
          </svg>
          <span class="trend-value">+{{ Math.floor(Math.random() * 20 + 5) }}%</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, nextTick, computed } from 'vue'
import * as echarts from 'echarts'

const props = defineProps({
  data: {
    type: Object,
    default: () => ({
      categories: [],
      series: [{ data: [] }]
    })
  }
})

const chartRef = ref(null)
const activeLocation = ref(-1)
let chartInstance = null

const getTotalVisitors = () => {
  return props.data.series[0].data.reduce((sum, val) => sum + val, 0)
}

const getLocationIcon = (location) => {
  const icons = {
    '观音湖': 'M12,2A6,6 0 0,1 18,8C18,12.27 12,19 12,19S6,12.27 6,8A6,6 0 0,1 12,2M12,6A2,2 0 0,0 10,8A2,2 0 0,0 12,10A2,2 0 0,0 14,8A2,2 0 0,0 12,6Z',
    '梵音寺': 'M12,2L13.09,8.26L17,7L14.94,9.06L19,12L14.94,14.94L17,17L13.09,15.74L12,22L10.91,15.74L7,17L9.06,14.94L5,12L9.06,9.06L7,7L10.91,8.26L12,2Z',
    '湖心岛': 'M12,18.5C16.42,18.5 20,15.36 20,11.5C20,9.34 18.86,7.39 17,6.25C16.64,5.96 16.25,5.71 15.84,5.5C14.77,4.95 13.57,4.64 12.31,4.64C9.33,4.64 6.86,6.5 6.86,8.86C6.86,10.45 8.28,11.64 10.07,11.64C11.86,11.64 13.29,10.45 13.29,8.86H12.31C12.31,9.9 11.57,10.71 10.64,10.71S8.96,9.9 8.96,8.86C8.96,7.15 10.5,5.75 12.31,5.75C13.18,5.75 13.96,6.05 14.6,6.57C15.24,7.09 15.75,7.8 15.75,8.57V11.5C15.75,12.88 14.38,14 12.75,14H11.25C9.62,14 8.25,12.88 8.25,11.5V8.57C8.25,7.8 8.76,7.09 9.4,6.57C10.04,6.05 10.82,5.75 11.69,5.75C13.5,5.75 15.04,7.15 15.04,8.86C15.04,9.9 14.3,10.71 13.36,10.71S11.69,9.9 11.69,8.86H10.71C10.71,10.45 12.14,11.64 13.93,11.64C15.72,11.64 17.14,10.45 17.14,8.86C17.14,6.5 14.67,4.64 11.69,4.64C10.43,4.64 9.23,4.95 8.16,5.5C7.75,5.71 7.36,5.96 7,6.25C5.14,7.39 4,9.34 4,11.5C4,15.36 7.58,18.5 12,18.5Z',
    '游客中心': 'M19,3H5A2,2 0 0,0 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5A2,2 0 0,0 19,3M19,19H5V5H19V19M17,17H7V15H17V17M17,13H7V11H17V13M17,9H7V7H17V9Z',
    '停车场': 'M18.92,2.01C18.72,1.42 18.16,1 17.5,1H6.5C5.84,1 5.29,1.42 5.08,2.01L3,8V16A1,1 0 0,0 4,17H5A1,1 0 0,0 6,16V15H18V16A1,1 0 0,0 19,17H20A1,1 0 0,0 21,16V8L18.92,2.01M6.85,3H17.14L18.22,6H5.78L6.85,3M19,13H5V8H19V13Z'
  }
  return icons[location] || icons['游客中心']
}

const initChart = () => {
  if (!chartRef.value) return
  
  chartInstance = echarts.init(chartRef.value)
  
  const option = {
    tooltip: {
      trigger: 'axis',
      backgroundColor: 'rgba(0, 0, 0, 0.8)',
      borderColor: '#00ff88',
      borderWidth: 1,
      textStyle: { color: '#ffffff' },
      formatter: function(params) {
        const data = params[0]
        return `<div style="padding: 5px;">
          <div style="color: #00ff88; font-weight: bold;">${data.name}</div>
          <div style="margin-top: 5px;">
            <span style="color: #ffffff;">游客数量：</span>
            <span style="color: #00ff88; font-weight: bold;">${data.value}人</span>
          </div>
        </div>`
      }
    },
    grid: {
      left: '5%',
      right: '5%',
      bottom: '15%',
      top: '10%',
      containLabel: true
    },
    xAxis: {
      type: 'category',
      data: props.data.categories,
      axisLine: {
        lineStyle: { color: 'rgba(0, 255, 136, 0.3)' }
      },
      axisLabel: {
        color: 'rgba(255, 255, 255, 0.8)',
        fontSize: 10,
        interval: 0,
        rotate: 0
      },
      axisTick: {
        show: false
      }
    },
    yAxis: {
      type: 'value',
      axisLine: { show: false },
      axisTick: { show: false },
      axisLabel: {
        color: 'rgba(255, 255, 255, 0.6)',
        fontSize: 10
      },
      splitLine: {
        lineStyle: { color: 'rgba(0, 255, 136, 0.1)' }
      }
    },
    series: [
      {
        type: 'bar',
        data: props.data.series[0].data.map((value, index) => ({
          value,
          itemStyle: {
            color: {
              type: 'linear',
              x: 0, y: 0, x2: 0, y2: 1,
              colorStops: [
                { offset: 0, color: '#00ff88' },
                { offset: 1, color: 'rgba(0, 255, 136, 0.3)' }
              ]
            },
            borderRadius: [4, 4, 0, 0],
            shadowColor: 'rgba(0, 255, 136, 0.5)',
            shadowBlur: 10
          }
        })),
        barWidth: '50%',
        emphasis: {
          itemStyle: {
            shadowBlur: 20,
            shadowColor: 'rgba(0, 255, 136, 0.8)'
          }
        },
        animationDelay: (idx) => idx * 100
      }
    ],
    animationEasing: 'elasticOut',
    animationDelayUpdate: (idx) => idx * 50
  }
  
  chartInstance.setOption(option)
  
  // 添加点击事件
  chartInstance.on('click', (params) => {
    highlightLocation(params.dataIndex)
  })
}

const highlightLocation = (index) => {
  activeLocation.value = index
  if (chartInstance) {
    chartInstance.dispatchAction({
      type: 'highlight',
      seriesIndex: 0,
      dataIndex: index
    })
    
    setTimeout(() => {
      chartInstance.dispatchAction({
        type: 'downplay',
        seriesIndex: 0
      })
    }, 2000)
  }
}

const highlightAll = () => {
  activeLocation.value = -1
  if (chartInstance) {
    chartInstance.dispatchAction({
      type: 'downplay',
      seriesIndex: 0
    })
  }
}

onMounted(() => {
  nextTick(() => {
    initChart()
  })
})
</script>

<style scoped>
.flow-chart {
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.chart-header {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.6rem;
  background: rgba(0, 255, 136, 0.08);
  border: 1px solid rgba(0, 255, 136, 0.2);
  border-radius: 10px;
  transition: all 0.3s ease;
}

.chart-header:hover {
  background: rgba(0, 255, 136, 0.15);
  border-color: rgba(0, 255, 136, 0.4);
}

.header-icon {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 255, 136, 0.15);
  border-radius: 6px;
  color: #00ff88;
  flex-shrink: 0;
}

.header-icon svg {
  width: 16px;
  height: 16px;
}

.header-info {
  flex: 1;
}

.chart-title {
  font-size: 0.9rem;
  font-weight: 600;
  color: #ffffff;
  margin: 0 0 0.1rem 0;
}

.chart-subtitle {
  font-size: 0.7rem;
  color: rgba(255, 255, 255, 0.6);
  margin: 0;
}

.flow-stats {
  flex-shrink: 0;
}

.stat-item {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  padding: 0.7rem;
  background: rgba(0, 255, 136, 0.06);
  border: 1px solid rgba(0, 255, 136, 0.15);
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.stat-item:hover,
.stat-item.total:hover {
  background: rgba(0, 255, 136, 0.15);
  border-color: rgba(0, 255, 136, 0.3);
  transform: scale(1.02);
  box-shadow: 
    inset 0 0 8px rgba(0, 255, 136, 0.1),
    0 2px 8px rgba(0, 255, 136, 0.15);
}

.stat-icon {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 255, 136, 0.15);
  border-radius: 8px;
  color: #00ff88;
  flex-shrink: 0;
}

.stat-icon svg {
  width: 20px;
  height: 20px;
}

.stat-details {
  flex: 1;
}

.stat-value {
  font-size: 1.4rem;
  font-weight: bold;
  color: #00ff88;
  text-shadow: 0 0 15px rgba(0, 255, 136, 0.5);
  margin-bottom: 0.2rem;
}

.stat-label {
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.7);
}

.chart-container {
  flex: 1;
  min-height: 120px;
  background: rgba(0, 255, 136, 0.03);
  border: 1px solid rgba(0, 255, 136, 0.1);
  border-radius: 10px;
  padding: 0.3rem;
}

.location-list {
  max-height: 100px;
  overflow-y: auto;
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  scrollbar-width: thin;
  scrollbar-color: rgba(0, 255, 136, 0.3) transparent;
  padding: 2px 3px;
}

.location-list::-webkit-scrollbar {
  width: 3px;
}

.location-list::-webkit-scrollbar-track {
  background: transparent;
}

.location-list::-webkit-scrollbar-thumb {
  background: rgba(0, 255, 136, 0.3);
  border-radius: 2px;
}

.location-item {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.5rem;
  background: rgba(0, 255, 136, 0.04);
  border: 1px solid rgba(0, 255, 136, 0.1);
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.location-item:hover,
.location-item.active {
  background: rgba(0, 255, 136, 0.12);
  border-color: rgba(0, 255, 136, 0.25);
  transform: scale(1.01);
  box-shadow: 
    inset 0 0 6px rgba(0, 255, 136, 0.1),
    1px 0 6px rgba(0, 255, 136, 0.1);
}

.location-icon {
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #00ff88;
  flex-shrink: 0;
}

.location-icon svg {
  width: 14px;
  height: 14px;
}

.location-info {
  flex: 1;
}

.location-name {
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.8);
  margin-bottom: 0.05rem;
}

.location-count {
  font-size: 0.85rem;
  font-weight: 600;
  color: #00ff88;
  text-shadow: 0 0 8px rgba(0, 255, 136, 0.5);
}

.location-trend {
  display: flex;
  align-items: center;
  gap: 0.2rem;
  flex-shrink: 0;
}

.trend-up {
  width: 12px;
  height: 12px;
  color: #66bb6a;
}

.trend-value {
  font-size: 0.7rem;
  font-weight: 600;
  color: #66bb6a;
}

/* 动画效果 */
.location-item {
  animation: slideInUp 0.4s ease-out;
}

@keyframes slideInUp {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
</style> 